// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { NativeEventEmitter, ScrollView, TextInput, NativeModules, Platform, StyleSheet, Text, View, Image, TouchableOpacity, Alert, Switch, ImageBackground } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import axios from 'axios';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { Tabs, Toast, List, Popover } from '@ant-design/react-native';
const Item = Popover.Item;

// 引入 处理数据 所需文件
import { } from '../../module/module.js'

// 引入样式
import Style from './style.js';

// 引入公用组件
import { Layout, Title, NetInfoScene, Results, RefreshScrollView, ScrollableTabBar } from '../../components/index.js'

// 引入专用组件
import { TabsNav, Contract, Subscribe, Access } from './components/index.js'

// 引入工具包

import { nblogo, classDefault } from '../../util/images.js'
import { size, longitude, latitude, ScreenWidth } from '../../util/utils.js'

class Exchange extends Component {

  constructor(props) {
    super(props)
    console.log(props)
    this.state = {
      active: props.active || 1,
      tabsNav: [{
        name: '合约',
        active: 1
      }, {
        name: '订阅',
        active: 2
      }, {
        name: '接入',
        active: 3
      }],
      chartsList: [],
      exchangeApiList: [],
      messages: [],
      positionsList: [],
      users: {},
      value: false
    }

  }

  componentDidMount() {
    const { userInfo } = this.props
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      active: nextProps.active
    })
  }

  changeTab(active) {
    this.setState({
      active
    })
  }

  render() {
    const { active, tabsNav, chartsList, exchangeApiList, messages, positionsList, value } = this.state
    console.log(active)
    return (
      <Layout style={{ backgroundColor: '#0A0C21' }} statusStyle={{}}>
        <View style={{ height: 44, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }}>
          <TabsNav active={active} tabsNav={tabsNav} onPress={(active) => this.changeTab(active)} />
          {active == 1 && (
            <View style={{ paddingRight: 10 }}>
              <Image resizeMode='cover' style={{ width: 20, height: 20 }} source={require('../../static/images/icon-search.png')} />
            </View>
          )}
          {active == 2 && (
            <View style={{ paddingRight: 10 }}>
              <Switch value={value} trackColor="#fff" thumbColor="#FFFFFF" tintColor="#7484FF" onValueChange={(value) => this.setState({ value })} />
            </View>
          )}
        </View>
        {active == 1 && <Contract />}
        {active == 2 && <Subscribe value={value} />}
        {active == 3 && <Access />}
      </Layout>
    );
  }
}



export default connect(({ userInfo }) => ({
  userInfo,
}))(pureRender(Exchange))
